<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用路由配合组件开发简单页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link rel="stylesheet" href="../static/bootstarp/bootstrap-3.3.7/bootstrap.min.css">
</head>
<body>
<!--使用路由配合组件开发-->
<div id="app">
    <div class="container">
        <div class="row" style="margin-top: 70px">
            <div class="col-md-10 col-md-offset-1">
                <ul class="nav nav-pills nav-justified">
                    <li role="presentation" :class="{active:(showActive==='home')}"><a href="#/home" @click="showActive='home'">主页</a></li>
                    <li role="presentation" :class="{active:(showActive==='user')}"><a href="#/user" @click="showActive='user'">用户管理</a></li>
                    <li role="presentation" :class="{active:(showActive==='student')}"><a href="#/student" @click="showActive='student'">学生管理</a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <!--显示路由组件的内容-->
                <router-view></router-view>
            </div>
        </div>
    </div>
</div>

<!--主页模板-->
<template id="home">
    <div>
        <div class="jumbotron" style="margin-top: 100px">
            <h1>Hello, world!</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
                content or information.</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>
    </div>
</template>

<!--用户信息模板-->
<template id="user">
    <div>
        <table class="table table-striped">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.gender}}</td>
                <td>{{user.age}}</td>
                <td>
                    <a href="" class="btn btn-default">修改</a>
                    <a href="" class="btn btn-danger">删除</a>
                </td>
            </tr>
        </table>
    </div>
</template>
<template id="student">
    <div>
        <table class="table table-striped">
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>专业</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1018</td>
                <td>AnonyEast</td>
                <td>男</td>
                <td>软件工程</td>
                <td>
                    <a href="" class="btn btn-default">修改</a>
                    <a href="" class="btn btn-danger">删除</a>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    //1.主页组件配置对象
    let home = {
        template: `#home`
    }
    //2.用户管理组件配置对象
    let user = {
        template: `#user`,
        data() {
            return {
                userList: []
            };
        },
        methods: {},
        created() {
            let _this = this;//此处的this指向该组件
            //发送查询所有用户的请求
            axios.get("http://localhost:8080/user/findAll")
                .then(function (response) {
                    console.log(response.data);
                    _this.userList = response.data;
                })
        }
    }
    //3.学生管理组件的配置对象
    let student = {
        template: `#student`
    }

    //使用路由
    let router = new VueRouter({
        routes: [
            {path: '/', redirect: '/home'},
            {path: '/home', component: home},
            {path: '/user', component: user},
            {path: '/student', component: student},
        ]
    });

    let app = new Vue({
        el: '#app',
        data: {
            showActive:'home'
        },
        methods: {},
        router: router
    });
</script>
</body>
</html>